<template>
<div class="col-lg-12 control-section card-control-section reveal_card_layout">
    <div class="e-card-resize-container">
        <div class="row">
            <div class="row card-layout">
                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                    <!-- Reveal Card Layout  -->
                    <div class="e-card" style="text-align:center;">
                        <img class="img-responsive" src="./images/Tile_4.png" alt="Force.com Succinctly">
                        <div id="card_revealed" style="min-height:177px">
                            <div class="e-card-content" style="line-height:2.75em">
                                <table style="width: 100%;table-layout: fixed;">
                                    <tbody><tr>
                                        <td>
                                            <div style="text-align: left;font-weight: 500;"> Author </div>
                                        </td>
                                        <td>
                                            <div style="text-align: left;width: 80px;white-space:nowrap">Steve Fenton</div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div style="text-align: left;font-weight: 500;">Published on</div>
                                        </td>
                                        <td>
                                            <div style="text-align: left;white-space:nowrap">Jul 7, 2014</div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div style="text-align: left;font-weight: 500;">Pages</div>
                                        </td>
                                        <td>
                                            <div style="text-align: left;">82</div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="e-card-actions">
                                                <button id="showcarddata" class="e-btn e-outline e-primary">
                                                    Know More
                                                </button>
                                            </div>
                                        </td>
                                        <td style="text-align:right">
                                            <div class="e-card-actions">
                                                <button class="e-card-btn" id="showcarddata_icon" title="Click to see more...">
                                                    <span class="e-btn-icon e-icons e-reveal-icon e-icon-right" style="margin:0"></span>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody></table>
                            </div>
                        </div>
                        <div id="card_reveal" style="min-height:154px">
                            <div class="e-card-header">
                                <div class="e-card-header-caption">
                                    <div class="e-card-header-title">TypeScript</div>
                                </div>
                                <div id="card-reveal_collapse" title="Click to see back...">
                                    <span class="e-icons e-collapse" style="height: 5px;"></span>
                                </div>
                            </div>

                            <div class="e-card-content" style="line-height:1.4em">
                                Microsoft has done extensive work to make JavaScript easier to use. Microsoft TypeScript extends many familiar features of
                                .NET programming to JavaScript.
                            </div>

                            <div class="e-card-actions e-card-vertical">
                                <a href="https://www.syncfusion.com/ebooks/typescript" target="_blank"> Go to Download </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
         <div id="action-description">
    <p>This sample demonstrates rendering the card with reveal layouts. Hidden information of card can be revealed to see while clicking “Know more”.</p>
</div>
<div id="description">
    <p>Cards in this sample have a hidden content within the DOM which is available behind the visible element.</p>
    <p>More information about Card can be found in this
        <a href="https://ej2.syncfusion.com/vue/documentation/card/getting-started/" target="_blank"> documentation section</a>.</p>
</div>
</div>
</template>
<style>
.card-control-section.reveal_card_layout .e-card #card_revealed .e-card-content table td,
    .card-control-section.reveal_card_layout .e-card #card_reveal .e-card-header .e-card-header-caption {
        text-align: left
    }

    .card-control-section.reveal_card_layout .e-card #card_revealed .e-card-content table td .e-card-actions .e-card-btn {
        background-color: inherit;
        border: none;
    }

    .card-control-section.reveal_card_layout .row.card-layout .e-card #card_reveal.e-reveal-show {
        display: block;
        height: auto;
        overflow: hidden;
    }

    .card-control-section.reveal_card_layout .row.card-layout .e-card .e-reveal-show {
        animation: reveal 0.3s cubic-bezier(.8, .2, .1, 0.8);
    }

    .card-control-section.reveal_card_layout .row.card-layout .e-card #card_reveal.e-reveal-hide {
        animation: hidden 0.3s cubic-bezier(.8, .2, .1, 0.8);
        transition: all 200ms;
        transform: translateY(0px) scale(0);
    }

    .card-control-section.reveal_card_layout .e-card #card_reveal {
        display: none;
    }

    .card-control-section.reveal_card_layout .card-layout .e-card .e-reveal-hide {
        display: none;
        height: 0;
        overflow: hidden;
    }

    @keyframes hidden {
        0% {
            transform: translateY(-100px);
            display: block !important;
            z-index: 20;
        }
        10% {
            transform: translateY(-90px);
        }
        20% {
            transform: translateY(-80px);
        }
        30% {
            transform: translateY(-70px);
        }
        40% {
            transform: translateY(-60px);
        }
        50% {
            transform: translateY(-50px);
        }
        60% {
            transform: translateY(-40px);
        }
        70% {
            transform: translateY(-30px);
        }
        80% {
            transform: translateY(-20px);
        }
        90% {
            transform: translateY(-10px);
        }
        100% {
            transform: translateY(0px) scale(0);
            display: none;
            z-index: 0;
        }
    }

    @keyframes reveal {
        0% {
            transform: translateY(100px);
        }
        10% {
            transform: translateY(90px);
        }
        20% {
            transform: translateY(80px);
        }
        30% {
            transform: translateY(70px);
        }
        40% {
            transform: translateY(60px);
        }
        50% {
            transform: translateY(50px);
        }
        60% {
            transform: translateY(40px);
        }
        70% {
            transform: translateY(30px);
        }
        80% {
            transform: translateY(20px);
        }
        90% {
            transform: translateY(10px);
        }
        100% {
            transform: translateY(0px) scale(0);
        }
    }

    .card-control-section.reveal_card_layout .e-card .e-collapse:before {
        content: "\e7fc";
        font-size: 12px;
    }

    .card-control-section.reveal_card_layout .e-card .e-reveal-icon {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
    }

    .card-control-section.reveal_card_layout .e-card .e-reveal-icon:before {
        content: "\e984";
    }

    .card-control-section.reveal_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {
        width: 100%;
        padding: 10px;
    }

    .card-control-section.reveal_card_layout .card-layout {
        margin: auto;
        max-width: 250px;
    }

    @media (min-width: 560px) {
        .card-control-section.reveal_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {
            width: 100%;
        }
        .card-control-section.reveal_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 .e-card {
            width: 250px;
            margin: auto;
        }
    }
</style>
<script>
import Vue from "vue";
export default Vue.extend({
  mounted: function() {
    document.getElementById('showcarddata').onclick = function () {
            var cEle = document.getElementById('card_revealed');
            var cardEle = cEle.parentNode.parentNode;
            var revealEle = cardEle.querySelector('#card_reveal');
            revealEle.classList.add('e-reveal-show');
            revealEle.classList.remove('e-reveal-hide');
            var revealedEle = cardEle.querySelector('#card_revealed');
            revealedEle.classList.add('e-reveal-hide');
            revealedEle.classList.remove('e-reveal-show');
        };
        document.getElementById('showcarddata_icon').onclick = function () {
            var cEle = document.getElementById('card_revealed');
            var cardEle = cEle.parentNode.parentNode;
            var revealEle = cardEle.querySelector('#card_reveal');
            revealEle.classList.add('e-reveal-show');
            revealEle.classList.remove('e-reveal-hide');
            var revealedEle = cardEle.querySelector('#card_revealed');
            revealedEle.classList.add('e-reveal-hide');
            revealedEle.classList.remove('e-reveal-show');
        };
        document.getElementById('card-reveal_collapse').onclick = function (e) {
            var cardEle = e.currentTarget.parentNode.parentNode.parentElement;
            var revealEle = cardEle.querySelector('#card_reveal');
            revealEle.classList.add('e-reveal-hide');
            revealEle.classList.remove('e-reveal-show');
            var revealedEle = cardEle.querySelector('#card_revealed');
            revealedEle.classList.add('e-reveal-show');
            revealedEle.classList.remove('e-reveal-hide');
        };
  }
});

</script>